<script setup lang="ts">
import type { PayMenuItemEmits, PayMenuItemProps } from './types';

const props = withDefaults(defineProps<PayMenuItemProps>(), {
  selected: false
});

const emits = defineEmits<PayMenuItemEmits>();

const onItemClick = () => {
  emits('click', props.data);
};
</script>

<template>
  <!-- 单个的支付项 -->
  <div
    class="relative mt-2 mr-2 flex w-[100px] flex-none cursor-pointer flex-col items-center rounded-md border-[1px] py-3 hover:border-orange-300 hover:bg-orange-50 xl:w-[150px] xl:py-2"
    :class="{
      'border-orange-300 bg-orange-50 dark:bg-orange-50/10': props.selected,
      'border-zinc-300 bg-white dark:border-zinc-500 dark:bg-zinc-900':
        !props.selected
    }"
    @click="onItemClick"
  >
    <!-- 标题 -->
    <p
      class="text-base"
      :class="{
        'text-yellow-800 dark:text-orange-300': props.selected,
        'text-yellow-800 dark:text-zinc-300': !props.selected
      }"
    >
      {{ data.title }}
    </p>
    <!-- 价格 -->
    <p
      class="font-sans text-[32px] font-bold tracking-tighter"
      :class="{
        'text-yellow-800 dark:text-orange-300': props.selected,
        'text-yellow-800 dark:text-zinc-300': !props.selected
      }"
    >
      <span class="text-base">￥</span>
      {{ data.price }}
    </p>
    <!-- 原价 -->
    <p class="text-xs text-yellow-500 line-through">￥{{ data.oldPrice }}</p>
    <!-- 热销 -->
    <div
      v-if="hot"
      class="absolute top-[-12px] right-[-1px] h-[22px] w-[48px] rounded-tr-[10px] rounded-bl-[10px] bg-gradient-to-r from-orange-300 to-orange-100 text-center text-[12px] leading-[22px] text-yellow-700"
    >
      热销
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
